@extends('layouts.appDomain')
@section('title')道具商城 - @endsection
@section('style')
    <style>
        .el-card.selected {
        }
        .el-card.selected .el-card__body,
        .el-card.selected:hover .el-card__body {
            background-color: #ecf7fa;
            border: 5px solid #3badff;
            padding: 5px 5px;
        }

        .el-card .el-card__body {
            background-color: #ecf7fa;
            cursor: pointer;
            border: 5px solid #ecf7fa;
            padding: 5px 5px;
        }
    </style>
@endsection
@section('script')
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                a:2,
                characters:[],
                curCharGuid:0,
                goodsList:[],
                cats:[],
                curCatId:0,
                curCatIdTab:'tab0',
            },
            created: function () {
                console.log(this.a)
            },
            mounted() {
                this.getData();
            },
            watch:{
                curCatIdTab(){
                    this.curCatId= parseInt(this.curCatIdTab.substr(3));
                }
            },
            methods: {
                getData:function(){
                    var t=this;
                    post("/user/mall/getData",{},res=>{
                        t.characters=res.data.characters
                        t.goodsList=res.data.list
                        t.cats=res.data.cats
                        console.log(res)
                    },t);
                },
                buyGoods:function (goodsId,count){
                    var t=this;
                    if (!t.curCharGuid){
                        t.$message.error('请选择角色');
                        return;
                    }
                    count=parseInt(count)
                    if(!count>0){
                        t.$message.error('请输入购买数量');
                        return
                    }
                    console.log(t.curCharGuid,goodsId,count)
                    post("/user/mall/buy",{guid:t.curCharGuid,goodsId:goodsId,count:count},res=>{
                        if (res.err===0){
                            t.$alert(res.msg, '结果', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    // location.reload()
                                    $(".nav-item .money").html('积分：'+res.data);
                                }
                            });
                        }else{
                            t.$message.error(res.msg);
                        }

                    },t);
                }
            }
        })
    </script>
@endsection
@section('content')
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-md-12">



                <div class="card panel">

                    <div class="form-group">
                        <div class="card-header mb-3">角色列表 <span class="small">点击选择</span></div>

                        <el-row :gutter="10">
                            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" style="padding-bottom: 10px" v-for="(char,index) in characters" :key="index">
                                <el-card shadow="hover" :class="{selected:curCharGuid==char.guid}">
                                    <div @click="curCharGuid=char.guid">
                                        <component-character-race :race="char.race"></component-character-race>
                                        <component-character-class :c="char.class"></component-character-class>
                                        <div class="mt-3">[ @{{ char.level }} ] @{{char.name}}</div>
                                    </div>

                                </el-card>
                            </el-col>

                        </el-row>

<!--                        <select name="guid" class="form-control" id="exampleFormControlSelect2">
                            @foreach($characters as $c)
                            <option value="{{$c->guid}}">{{$c->name}} - lv: {{$c->level}}</option>
                            @endforeach
                        </select>-->
                    </div>

                    <div class="card-header">商品列表</div>

                    <el-tabs v-model="curCatIdTab">
                        <el-tab-pane label="全部" :name="'tab0'"></el-tab-pane>
                        <el-tab-pane v-for="v in cats" :key="v.id" :label="v.title" :name="'tab'+v.id"></el-tab-pane>
                    </el-tabs>

                    <div class="row">
                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12" v-for="goods in goodsList" :key="goods.id" v-if="(curCatId===0 || curCatId==goods.cat_id) && goods.entry">
                            <div class="media my-4">
                                <span class="align-self-start mr-2 itemIcon">
                                    <component-item-info-box :item="goods.entry">
                                        <img :src="goods.entry.iconPath">
                                    </component-item-info-box>
                                </span>
                                <div class="media-body">
                                    <h6 class="mt-1">
                                        <component-item-name :name="goods.entry.name" :quality="goods.entry.Quality"></component-item-name>
                                    </h6>
                                    <span class="badge badge-default" style="font-size: 12px">等级要求: @{{ goods.entry.RequiredLevel }}</span>

                                    <div class="input-group input-group-sm mt-2">

                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="basic-addon1">单价: @{{ goods.price>0?goods.price+' 积分':'免费' }} </span>
                                        </div>

                                        <input type="number" v-model="goods.count" min="1" step="1" :max="goods.entry.stackable * 5" class="form-control" placeholder="请输入数量 ">

                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button" name="id" @click="buyGoods(goods.id,goods.count)" > 购买 </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </div>
    </div>
@endsection
